<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">

      <el-form-item label="航标名称" prop="buoyName">
        <el-input
          v-model="queryParams.buoyName"
          placeholder="请输入航标名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="航段名称" prop="legName">
        <el-input
          v-model="queryParams.legName"
          placeholder="请输入航段名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="是否专用标" prop="whSpecialLabel">
        <el-select
          v-model="queryParams.whSpecialLabel"
          placeholder="请输入是否专用标"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.yesno"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="航段管理单位" prop="legManage">
        <el-input
          v-model="queryParams.legManage"
          placeholder="请输入航段管理单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="设标地点" prop="location‌">
        <el-input
          v-model="queryParams.location‌"
          placeholder="请输入设标地点"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>



      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:buoy:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:buoy:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:buoy:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:buoy:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="buoyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键id" align="center" prop="id" />
      <el-table-column label="航段名称" align="center" prop="legName" />

      <el-table-column label="是否专用标" align="center" prop="whSpecialLabel">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yesno" :value="scope.row.whSpecialLabel" />
        </template>
      </el-table-column>
      <el-table-column label="航标类型" align="center" prop="buoyType" />
      <el-table-column label="航段管理单位" align="center" prop="legManage" />
      <el-table-column label="标志结构" align="center" prop="signStructure" />
      <el-table-column label="标志高度" align="center" prop="signHeight" />
      <el-table-column label="标志材料" align="center" prop="signMaterial" />
      <el-table-column label="标志颜色" align="center" prop="signColor" />
      <el-table-column label="标志视距" align="center" prop="signLine" />
      <el-table-column label="岸别" align="center" prop="shoreSide" />
      <el-table-column label="设标地点" align="center" prop="location‌" />
      <el-table-column label="设标水深" align="center" prop="sounding" />
      <el-table-column label="设标地点x坐标" align="center" prop="xAxis" />
      <el-table-column label="设标地点y坐标" align="center" prop="yAxis" />
      <el-table-column label="维护水深" align="center" prop="upkeepSounding" />
      <el-table-column label="仪器" align="center" prop="instrument" />
      <el-table-column label="灯光功率" align="center" prop="lightPower" />
      <el-table-column label="标称电压" align="center" prop="ratedVoltage" />
      <el-table-column label="光源" align="center" prop="luminance" />
      <el-table-column label="光色" align="center" prop="chromaticity" />
      <el-table-column label="闪光" align="center" prop="flash" />
      <el-table-column label="周期" align="center" prop="period" />
      <el-table-column label="透镜" align="center" prop="lens" />
      <el-table-column label="灯光视距" align="center" prop="lightRange" />
      <el-table-column label="昼夜标" align="center" prop="dayNightMark" />
      <el-table-column label="安全距离" align="center" prop="safetyDistance" />
      <el-table-column label="灯标能源" align="center" prop="energy" />
      <el-table-column label="太阳能功率" align="center" prop="solarPower" />
      <el-table-column label="电池类型" align="center" prop="batteryType" />
      <el-table-column label="电池容量" align="center" prop="batteryCapacity" />
      <el-table-column label="锚链长度" align="center" prop="anchorChainLength" />
      <el-table-column label="电池箱尺寸" align="center" prop="batterySize" />
      <el-table-column label="最初设标时间" align="center" prop="settingTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.settingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近改造时间" align="center" prop="renovationTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.renovationTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="遥测号码" align="center" prop="telemetryNumber" />
      <el-table-column label="航标名称" align="center" prop="buoyName" />
      <el-table-column label="图片地址" align="center" prop="pics" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.pics" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="是否已拆除 1拆除 0未拆除" align="center" prop="whDemolish" />
      <el-table-column label="拆除时间" align="center" prop="demolishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.demolishTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:buoy:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:buoy:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改航标基础数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item label="航标名称" prop="buoyName">
          <el-input v-model="form.buoyName" placeholder="请输入航标名称" />
        </el-form-item>
        <el-form-item label="遥测号码" prop="telemetryNumber">
          <el-input v-model="form.telemetryNumber" placeholder="请输入遥测号码" />
        </el-form-item>
        <el-form-item label="航段名称" prop="legName">
          <el-input v-model="form.legName" placeholder="请输入航段名称" />
        </el-form-item>
        <el-form-item label="航标类型" prop="buoyType">
          <el-radio-group v-model="form.buoyType">
            <el-radio
              v-for="dict in dict.type.hb_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否专用标" prop="whSpecialLabel">
          <el-radio-group v-model="form.whSpecialLabel">
            <el-radio
              v-for="dict in dict.type.yesno"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="航段管理单位" prop="legManage">
          <el-input v-model="form.legManage" placeholder="请输入航段管理单位" />
        </el-form-item>
        <el-form-item label="标志结构" prop="signStructure">
          <el-input v-model="form.signStructure" placeholder="请输入标志结构" />
        </el-form-item>
        <el-form-item label="标志高度" prop="signHeight">
          <el-input v-model="form.signHeight" placeholder="请输入标志高度" />
        </el-form-item>
        <el-form-item label="标志材料" prop="signMaterial">
          <el-radio-group v-model="form.signMaterial">
            <el-radio
              v-for="dict in dict.type.blcl"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标志颜色" prop="signColor">
          <el-radio-group v-model="form.signColor">
            <el-radio
              v-for="dict in dict.type.btys"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标志视距" prop="signLine">
          <el-input v-model="form.signLine" placeholder="请输入标志视距" />
        </el-form-item>
        <el-form-item label="岸别" prop="shoreSide">
          <el-radio-group v-model="form.shoreSide">
            <el-radio
              v-for="dict in dict.type.ab"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设标地点" prop="location‌">
          <el-input v-model="form.location‌" placeholder="请输入设标地点" />
        </el-form-item>
        <el-form-item label="设标水深" prop="sounding">
          <el-input v-model="form.sounding" placeholder="请输入设标水深" />
        </el-form-item>
        <el-form-item label="设标地点x坐标" prop="xAxis">
          <el-input v-model="form.xAxis" placeholder="请输入设标地点x坐标" />
        </el-form-item>
        <el-form-item label="设标地点y坐标" prop="yAxis">
          <el-input v-model="form.yAxis" placeholder="请输入设标地点y坐标" />
        </el-form-item>
        <el-form-item label="维护水深" prop="upkeepSounding">
          <el-input v-model="form.upkeepSounding" placeholder="请输入维护水深" />
        </el-form-item>
        <el-form-item label="仪器" prop="instrument">
          <el-input v-model="form.instrument" placeholder="请输入仪器" />
        </el-form-item>
        <el-form-item label="灯光功率" prop="lightPower">
          <el-input v-model="form.lightPower" placeholder="请输入灯光功率" />
        </el-form-item>
        <el-form-item label="标称电压" prop="ratedVoltage">
          <el-input v-model="form.ratedVoltage" placeholder="请输入标称电压" />
        </el-form-item>
        <el-form-item label="光源" prop="luminance">
          <el-input v-model="form.luminance" placeholder="请输入光源" />
        </el-form-item>
        <el-form-item label="光色" prop="chromaticity">
          <el-input v-model="form.chromaticity" placeholder="请输入光色" />
        </el-form-item>
        <el-form-item label="闪光" prop="flash">
          <el-input v-model="form.flash" placeholder="请输入闪光" />
        </el-form-item>
        <el-form-item label="周期" prop="period">
          <el-input v-model="form.period" placeholder="请输入周期" />
        </el-form-item>
        <el-form-item label="透镜" prop="lens">
          <el-input v-model="form.lens" placeholder="请输入透镜" />
        </el-form-item>
        <el-form-item label="灯光视距" prop="lightRange">
          <el-input v-model="form.lightRange" placeholder="请输入灯光视距" />
        </el-form-item>
        <el-form-item label="昼夜标" prop="dayNightMark">
          <el-input v-model="form.dayNightMark" placeholder="请输入昼夜标" />
        </el-form-item>
        <el-form-item label="安全距离" prop="safetyDistance">
          <el-input v-model="form.safetyDistance" placeholder="请输入安全距离" />
        </el-form-item>
        <el-form-item label="灯标能源" prop="energy">
          <el-input v-model="form.energy" placeholder="请输入灯标能源" />
        </el-form-item>
        <el-form-item label="太阳能功率" prop="solarPower">
          <el-input v-model="form.solarPower" placeholder="请输入太阳能功率" />
        </el-form-item>
        <el-form-item label="电池容量" prop="batteryCapacity">
          <el-input v-model="form.batteryCapacity" placeholder="请输入电池容量" />
        </el-form-item>
        <el-form-item label="锚链长度" prop="anchorChainLength">
          <el-input v-model="form.anchorChainLength" placeholder="请输入锚链长度" />
        </el-form-item>
        <el-form-item label="电池箱尺寸" prop="batterySize">
          <el-input v-model="form.batterySize" placeholder="请输入电池箱尺寸" />
        </el-form-item>
        <el-form-item label="最初设标时间" prop="settingTime">
          <el-date-picker clearable
            v-model="form.settingTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择最初设标时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最近改造时间" prop="renovationTime">
          <el-date-picker clearable
            v-model="form.renovationTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择最近改造时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片地址" prop="pics">
          <image-upload v-model="form.pics"/>
        </el-form-item>
        <el-form-item label="是否已拆除" prop="whDemolish">
          <el-radio-group v-model="form.whDemolish">
            <el-radio
              v-for="dict in dict.type.yesno"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拆除时间" prop="demolishTime">
          <el-date-picker clearable
            v-model="form.demolishTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择拆除时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBuoy, getBuoy, delBuoy, addBuoy, updateBuoy } from "@/api/system/buoy"

export default {
  name: "Buoy",
  dicts: ['yesno', 'hb_type', 'blcl', 'ab','btys'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 航标基础数据表格数据
      buoyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        legName: null,
        whSpecialLabel: null,
        buoyType: null,
        legManage: null,
        signStructure: null,
        signHeight: null,
        signMaterial: null,
        signColor: null,
        signLine: null,
        shoreSide: null,
        location‌: null,
        sounding: null,
        xAxis: null,
        yAxis: null,
        upkeepSounding: null,
        instrument: null,
        lightPower: null,
        ratedVoltage: null,
        luminance: null,
        chromaticity: null,
        flash: null,
        period: null,
        lens: null,
        lightRange: null,
        dayNightMark: null,
        safetyDistance: null,
        energy: null,
        solarPower: null,
        batteryType: null,
        batteryCapacity: null,
        anchorChainLength: null,
        batterySize: null,
        settingTime: null,
        renovationTime: null,
        telemetryNumber: null,
        buoyName: null,
        whDemolish: null,
        demolishTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询航标基础数据列表 */
    getList() {
      this.loading = true
      listBuoy(this.queryParams).then(response => {
        this.buoyList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        legName: null,
        whSpecialLabel: null,
        buoyType: null,
        legManage: null,
        signStructure: null,
        signHeight: null,
        signMaterial: null,
        signColor: null,
        signLine: null,
        shoreSide: null,
        location‌: null,
        sounding: null,
        xAxis: null,
        yAxis: null,
        upkeepSounding: null,
        instrument: null,
        lightPower: null,
        ratedVoltage: null,
        luminance: null,
        chromaticity: null,
        flash: null,
        period: null,
        lens: null,
        lightRange: null,
        dayNightMark: null,
        safetyDistance: null,
        energy: null,
        solarPower: null,
        batteryType: null,
        batteryCapacity: null,
        anchorChainLength: null,
        batterySize: null,
        settingTime: null,
        renovationTime: null,
        telemetryNumber: null,
        buoyName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        pics: null,
        whDemolish: null,
        demolishTime: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加航标基础数据"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getBuoy(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改航标基础数据"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBuoy(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addBuoy(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除航标基础数据编号为"' + ids + '"的数据项？').then(function() {
        return delBuoy(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/buoy/export', {
        ...this.queryParams
      }, `buoy_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
